<template>
	<view>
		<view class="search">
			<u--input placeholder="马卡龙色 多功能早餐机" v-model="search_name" border="surround" clearable></u--input>
			<u-button class="search_btn" color="#c55a5c" @click="$router.push('/pages/category/search/search_result')">
				<u-icon name="search" color="#fff" size="28"></u-icon>
			</u-button>
		</view>
		<view class="hot_Search">
			<view style="font-size: 26rpx;color: #999;">热门搜索</view>
			<view class="tag">
				<u-tag :text="item.name" type="info" plain class="tags_name" v-for="item in tags" :key="item"></u-tag>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tags: [
					{ name: '羽绒服' },
					{ name: '四件套' },
					{ name: '卫衣' },
					{ name: '手表' },
					{ name: '板鞋' },
					{ name: '蛋糕' },
					{ name: '阔腿裤' },
					{ name: '餐具' },
					{ name: '围巾' },
					{ name: '旅行必备' },
				],
				search_name: '',
			}
		},
		methods: {
			handle_search() {
				this.$router.push({
					path: '/pages/category/search/search_result',
					query: {
						search_name: this.search_name
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		display: flex;
		justify-content: space-between;
		padding: 18rpx 21rpx 26rpx 20rpx;
	}

	.search_btn {
		width: 78rpx;
		height: 67rpx;
		margin-left: 25rpx;

	}

	.hot_Search {
		padding: 18rpx 21rpx 26rpx 20rpx;

		.tag {
			display: flex;
			flex-wrap: wrap;
			margin-top: 15rpx;
		}

		.tags_name {
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
	}
</style>